<template>
	<view>
		<!-- <uni-search-bar v-model="searchValue" bgColor="#fff" placeholder="搜索" style="height: 80rpx;margin: 0rpx 20rpx;">
		</uni-search-bar> -->
		<view style="margin: 20rpx 40rpx 0rpx 40rpx;">
			<uni-datetime-picker :clearIcon="false" v-model="range" type="daterange" @change="change"
				@maskClick="maskClick" />
		</view>
		<view style="margin: 0rpx 20rpx;">
			<view
				style="background-color: #fff;margin: 20rpx; padding: 20rpx; border-radius: 10rpx; margin-top: 30rpx;">
				<uni-segmented-control :current="typeCurrent" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<text style="width: 100%;border-radius: 10rpx;height: 100%;padding: 20rpx;">设备维修任务列表</text>
			<view class="content" style="margin-top: 20rpx;">
				<view v-if="typeCurrent === 0">
					<view v-for="(item,index) in repairData1" :key="index">
						<view
							style="background-color: #fff;margin-bottom: 40rpx;border-radius: 10rpx;padding:10rpx 20rpx;width: 100%;"
							@click="gotoPage('/pages/index/editRepairSh',item)">
							<view style="display:flex;">
								<view style="width: 20%;">
									<image 
									:src="item.faultImgPath?'http://211.103.114.94:2081/camera/IoReadImageByPath?path='+item.faultImgPath :'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'"
										style="width: 120rpx;height: 120rpx;margin-top: 15rpx;" error=""></image>
								</view>
								<view style="margin: 10rpx 10rpx;width: 80%;">
									<view style="display: flex;margin-bottom: 10rpx;">
										<view style="font-size: 26rpx;color: #A8A8A8;width: 80%;">
											编号：{{item.serialNo}}
										</view>
										<view style="width: 20%;">
											<view v-if="item.status == '正在审批'"
												style="color: #D63F37;font-size: 22rpx;width: 100%;padding:5rpx 5rpx ;text-align: center;font-weight: 400;background-color: #FAEFEE;border-radius: 5rpx;">
												{{item.status}}
											</view>
											<view v-else
												style="color: #3F92FA;font-size: 22rpx;width: 100%;padding:5rpx 5rpx ;text-align: center;font-weight: 400;background-color: #F5F5FF;border-radius: 5rpx;">
												{{item.status}}
											</view>
										</view>

									</view>
									<view style="border-bottom: 1rpx solid #ececec;"></view>
									<view style="color: #3E3C50;font-size: 26rpx;margin-top: 10rpx;">
										{{item.deviceName}}({{item.structureName}})
									</view>
									<view style="color: #A8A8A8;font-size: 24rpx;margin-top: 10rpx;">{{item.faultDetails}}</view>
									<view style="color: #A8A8A8;font-size: 22rpx;margin-top: 10rpx;">{{changeTime(item.handleTime)}}
									</view>
									
								</view>

							</view>
						</view>

					</view>

				</view>
				<view v-if="typeCurrent === 1">
					<view v-for="(item,index) in repairData1" :key="index">
						<view
							style="background-color: #fff;margin-bottom: 40rpx;border-radius: 10rpx;padding:10rpx 20rpx;width: 100%;"
							@click="gotoPage('/pages/index/editRepair',item)">
							<view style="display:flex;">
								<view style="width: 20%;">
									<image 
									:src="item.faultImgPath?'http://211.103.114.94:2081/camera/IoReadImageByPath?path='+item.faultImgPath :'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'"
										style="width: 120rpx;height: 120rpx;margin-top: 15rpx;" error=""></image>
								</view>
								<view style="margin: 10rpx 10rpx;width: 80%;">
									<view style="display: flex;margin-bottom: 10rpx;">
										<view style="font-size: 26rpx;color: #A8A8A8;width: 80%;">
											编号：{{item.serialNo}}
										</view>
										<view style="width: 20%;">
											<view v-if="item.status == '正在审批'"
												style="color: #D63F37;font-size: 22rpx;width: 100%;padding:5rpx 5rpx ;text-align: center;font-weight: 400;background-color: #FAEFEE;border-radius: 5rpx;">
												{{item.status}}
											</view>
											<view v-else
												style="color: #3F92FA;font-size: 22rpx;width: 100%;padding:5rpx 5rpx ;text-align: center;font-weight: 400;background-color: #F5F5FF;border-radius: 5rpx;">
												{{item.status}}
											</view>
										</view>
				
									</view>
									<view style="border-bottom: 1rpx solid #ececec;"></view>
									<view style="color: #3E3C50;font-size: 26rpx;margin-top: 10rpx;">
										{{item.deviceName}}({{item.structureName}})
									</view>
									<view style="color: #A8A8A8;font-size: 24rpx;margin-top: 10rpx;">{{item.faultDetails}}</view>
									<view style="color: #A8A8A8;font-size: 22rpx;margin-top: 10rpx;">{{changeTime(item.handleTime)}}
									</view>
									
								</view>
				
							</view>
						</view>
				
					</view>
				
				</view>
				<view v-if="typeCurrent === 2">
					<view v-for="(item,index) in repairData1" :key="index">
						<view
							style="background-color: #fff;margin-bottom: 40rpx;border-radius: 5rpx;padding:10rpx 20rpx;width: 100%;"
							@click="gotoPage('/pages/index/editRepairYs',item)">
							<view style="display:flex;">
								<view style="width: 20%;">
									<image 
									:src="item.faultImgPath?'http://211.103.114.94:2081/camera/IoReadImageByPath?path='+item.faultImgPath :'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'"
									
									style="width: 120rpx;height: 120rpx;margin-top: 15rpx;" error=""></image>
								</view>
								<view style="margin: 10rpx 10rpx;width: 80%;">
									<view style="display: flex;margin-bottom: 10rpx;">
										<view style="font-size: 26rpx;color: #A8A8A8;width: 80%;">
											编号：{{item.serialNo}}
										</view>
										<view style="width: 20%;">
											<view v-if="item.status == '正在审批'"
												style="color: #D63F37;font-size: 22rpx;width: 100%;padding:5rpx 5rpx ;text-align: center;font-weight: 400;background-color: #FAEFEE;border-radius: 5rpx;">
												{{item.status}}
											</view>
											<view v-else
												style="color: #3F92FA;font-size: 22rpx;width: 100%;padding:5rpx 5rpx ;text-align: center;font-weight: 400;background-color: #F5F5FF;border-radius: 5rpx;">
												{{item.status}}
											</view>
										</view>
							
									</view>
									<view style="border-bottom: 1rpx solid #ececec;"></view>
									<view style="color: #3E3C50;font-size: 26rpx;margin-top: 10rpx;">
										{{item.deviceName}}({{item.structureName}})
									</view>
									<view style="color: #A8A8A8;font-size: 24rpx;margin-top: 10rpx;">{{item.faultDetails}}</view>
									<view style="color: #A8A8A8;font-size: 22rpx;margin-top: 10rpx;">{{changeTime(item.handleTime)}}
									</view>
									
								</view>
							
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		queryProduceRepair
	} from "@/api/index"
	import {
		getToken,
		setToken,
		removeToken
	} from '@/utils/auth'
	export default {
		data() {
			return {
				range: ['2021-02-1', '2021-3-28'],
				start: Date.now() - 1000000000,
				end: Date.now() + 1000000000,
				form: {},
				typeCurrent: 0,
				searchValue: null,
				activeColor: '#727e8b',
				styleType: 'button',
				items: ['正在审批','正在处理', '已完成'

				],
				repairData1: []
			}
		},
		onReady() {
			this.getTime();
			var a = {};
			a.currentIndex = 0
			this.onClickItem(a);
		},
		methods: {
			onClickItem(e) {
				console.log(e)
				this.typeCurrent = e.currentIndex

				this.form.type = '维修';
				if (this.typeCurrent == 0) {
					this.form.status = '正在审批';
				} else if(this.typeCurrent == 1){
					this.form.status = '正在处理';
				}else {
					this.form.status = '已完成';
				}
				this.form.beginTime = this.range[0]
				this.form.endTime = this.range[1]

				queryProduceRepair(this.form).then(response => {
					this.repairData1 = response;
					// this.repairData1.forEach((item) => {
					// 	if (item.faultImgPath) {
					// 		this.getIamge(item.faultImgPath, item); // 调用getIamge方法，并将item作为参数传递
					// 	}
					// });
				})
			},
			getData(){
				this.form.type = '维修';
				if (this.typeCurrent == 0) {
					this.form.status = '正在审批';
				} else {
					this.form.status = '已完成';
				}
				this.form.beginTime = this.range[0]
				this.form.endTime = this.range[1]
				
				queryProduceRepair(this.form).then(response => {
					this.repairData1 = response.rows;
					
				})
			},onPullDownRefresh() {
				console.log('下拉刷新')
				
				var a = {};
				a.currentIndex = this.typeCurrent
				this.onClickItem(a);
				setTimeout(() => {
					console.log('下拉刷新停止')
					uni.stopPullDownRefresh()
				}, 2000)
			},
			maskClick(e) {
				this.range = e
				console.log('maskClick事件:', e);
				this.getData();
			},
			change(e) {
				this.range = e
				this.getData();
				console.log('change事件:', e);
			},
			changeTime(e) {
				//console.log(e);
				let date = new Date(e);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，然后使用padStart方法补齐两位
				let day = date.getDate().toString().padStart(2, '0'); // 使用padStart方法补齐两位

				let formattedDate = `${year}-${month}-${day}`;
				//console.log(formattedDate); // 输出格式化后的日期
				return formattedDate;
			},
			getTime() {
				const today = new Date();
				const year = today.getFullYear();
				const month = today.getMonth(); // 月份从 0 开始，所以需要加 1
				const day = today.getDate();
			
				// 获取当前月份的第一天
				const firstDayOfMonth = new Date(year, month, 1);
			
				// 格式化日期
				const format = (date) => {
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}-${month}-${day}`;
				};
			
				const startDate = format(firstDayOfMonth);
				const endDate = format(today);
			
				this.range = [startDate, endDate];
			}, 
			gotoPage(url, item) {

				uni.navigateTo({
					url: url + '?item=' + JSON.stringify(item)
				})
			},
			onNavigationBarButtonTap(e) {
				uni.navigateTo({
					url: '/pages/index/addRepair'
				})
			},
			getIamge(path, item) {
				var token = getToken();
				uni.request({
					url: 'http://211.103.114.94:2081/app/IoReadImageByPath',
					method: 'GET',
					responseType: 'arraybuffer', // 指定响应类型为arraybuffer，以便处理文件流
					data: {
						token: token,
						app_version: 'your_app_version',
						path: path
					},
					success: function(res) {
						// 将获取到的文件流转换为base64格式
						var base64 = uni.arrayBufferToBase64(res.data);
						// 将base64格式的文件展示为图片
						// 假设imgElement是用于展示图片的img标签
						item.faultImgPath = 'data:image/png;base64,' + base64; // 假设文件类型为png，根据实际情况修改
						item.faultImgPath1 = path;
					},
					fail: function(error) {
						console.log('请求失败', error);
					}
				});
			},imageError: function(e) {
				
            console.error('image发生error事件，携带值为' + e.detail.errMsg)
        }
		}
	}
</script>

<style>
	.content {
		margin: 0rpx 20rpx;
		border-radius: 5px;
	}
</style>